<template>
  <div>
    <p>Hello</p>
  </div>
</template>

<!-- 
  没有加 scoped 属性的 style ，样式是全局生效的。
  加了 scoped 属性的 style，样式是当前组件局部生效的。

  如何局部生效的？？？审查元素
    1. 组件的模板会在标签上设置上一段 data-v-xxxx 的属性
    2. 编写的css也会生成带有属性选择器的规则
      p[data-v-xxxx] {
        color: #fff;
      }

  style 的 deep 处理。【TODO: 后续修改子组件样式时再看】

  style 在一个 .vue 文件中，是可以有多个的
  template 在一个 .vue 文件中，只能有一个
  script 在一个 .vue 文件中，可以没有，也可以一个或两个
      没有： 会自动生成一个最简单的 script 内容
      一个： 必须要默认导出一个组件配置对象
      两个： 用于 setup 语法糖的情况
        <script setup></script>
        <script>
          export default {}
        </script>
 -->
<style scoped>
p {
  color: #fff;
}
</style>

<style></style>
